<!doctype html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <title>DeepSeek Chat</title>
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
  <link rel="stylesheet" href="/style.css" />
</head>

<body>
  <div class="container">
    <div class="layout">
      <aside class="sidebar">
        <div class="sidebar-header">
          <strong>💬 话题列表</strong>
          <button id="addTopicBtn" class="btn small primary" title="新建话题">+</button>
        </div>
        <ul id="topics" class="topics"></ul>
      </aside>
      <main class="main">
        <div class="header">
          <h1>DeepSeek Chat</h1>
          <div class="toolbar">
            <button id="setUsernameBtn" class="btn">👤 用户名</button>
            <button id="themeBtn" class="btn" title="切换主题">🌓</button>
            <button id="setKeyBtn" class="btn">🔑 密钥</button>
            <button id="balanceBtn" class="btn">💰 余额</button>
            <button id="statusBtn" class="btn">📊 状态</button>
            <div class="divider"></div>
            <button id="toggleSelectBtn" class="btn" title="多选复制">📝 多选</button>
            <div id="selectionTools" style="display: none; gap: 8px;">
              <button id="selectAllBtn" class="btn small">全选</button>
              <button id="copySelectedBtn" class="btn small primary">复制选中</button>
              <button id="cancelSelectBtn" class="btn small">取消</button>
            </div>
          </div>
        </div>
        <ul id="messages" class="messages"></ul>

        <div id="loadingIndicator" class="loading-indicator" style="display: none;">
          <div class="loading-spinner"></div>
          <span>AI 正在思考...</span>
        </div>

        <form id="form" class="form">
          <input id="input" type="text" placeholder="输入消息..." autocomplete="off" />
          <button type="submit" id="sendBtn">发送</button>
        </form>
        <p class="hint">按 Enter 发送</p>
      </main>
    </div>
  </div>

  <!-- 系统状态模态框 -->
  <div id="statusModal" class="modal">
    <div class="modal-content">
      <div class="modal-header">
        <h2>服务器状态</h2>
        <span class="close">&times;</span>
      </div>
      <div class="modal-body">
        <div class="status-grid">
          <div class="status-card">
            <h3>🖥️ CPU</h3>
            <div class="status-item"><span>使用率</span><span id="cpuUsage">--</span>%</div>
            <div class="status-item"><span>核心数</span><span id="cpuCores">--</span></div>
            <div class="status-item"><span>型号</span><span id="cpuModel">--</span></div>
          </div>

          <div class="status-card">
            <h3>💾 内存</h3>
            <div class="status-item"><span>总量</span><span id="memoryTotal">--</span></div>
            <div class="status-item"><span>已用</span><span id="memoryUsed">--</span></div>
            <div class="status-item"><span>使用率</span><span id="memoryUsage">--</span>%</div>
            <div class="process-list">
              <h4>内存占用 Top 5</h4>
              <div id="topProcesses">--</div>
              <button id="viewAllProcessesBtn" class="btn small" style="width:100%; margin-top:10px;">查看所有进程</button>
            </div>
          </div>

          <div class="status-card">
            <h3>💿 硬盘</h3>
            <div class="status-item"><span>总量</span><span id="diskTotal">--</span></div>
            <div class="status-item"><span>已用</span><span id="diskUsed">--</span></div>
            <div class="status-item"><span>使用率</span><span id="diskUsage">--</span>%</div>
          </div>

          <div class="status-card">
            <h3>🌐 网络</h3>
            <div class="status-item"><span>连接数</span><span id="networkConnections">--</span></div>
            <div class="status-item"><span>运行时间</span><span id="networkUptime">--</span></div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button id="refreshStatusBtn" class="btn">刷新</button>
      </div>
    </div>
  </div>

  <!-- 进程弹窗 -->
  <div id="processModal" class="modal">
    <div class="modal-content" style="max-width: 900px;">
      <div class="modal-header">
        <h2>系统进程</h2>
        <span class="close" id="closeProcessModal">&times;</span>
      </div>
      <div class="modal-body">
        <div class="process-table-container">
          <table class="process-table">
            <thead>
              <tr>
                <th>名称</th>
                <th>PID</th>
                <th>内存</th>
                <th>使用率</th>
              </tr>
            </thead>
            <tbody id="processTableBody"></tbody>
          </table>
        </div>
      </div>
      <div class="modal-footer">
        <button id="refreshProcessesBtn" class="btn">刷新</button>
        <button id="closeProcessModalBtn" class="btn">关闭</button>
      </div>
    </div>
  </div>

  <!-- 用户名输入模态框 -->
  <div id="usernameModal" class="modal" style="display: block;">
    <div class="modal-content" style="max-width: 400px;">
      <div class="modal-header">
        <h2>欢迎</h2>
      </div>
      <div class="modal-body">
        <p>请设置您的昵称以开始聊天</p>
        <form id="usernameForm">
          <input id="usernameInput" type="text" placeholder="昵称" autocomplete="off" required />
          <button type="submit" class="btn primary" style="width: 100%">进入聊天室</button>
        </form>
      </div>
    </div>
  </div>

  <script src="/marked.min.js"></script>
  <script src="/purify.min.js"></script>
  <script src="/client.js"></script>
</body>

</html>